<template>
  <el-container direction="vertical" style="width: 800px">
    <el-form ref="form" :model="form" :rules="rules" width="800px">
      <el-form-item label="账号" prop="username"><el-input v-model="form.username" placeholder="请输入账号" disabled/></el-form-item>
      <el-form-item label="店铺名称" prop="storeName"><el-input v-model="form.storeName" placeholder="请输入店铺名称" /></el-form-item>
      <el-form-item label="头像" prop="avatar"><image-upload v-model="form.avatar" property="avatar"/></el-form-item>
      <el-form-item label="电话" prop="phone"><el-input v-model="form.phone" placeholder="请输入电话" /></el-form-item>
      <el-form-item label="地址" prop="address">
        <span v-text="address"></span>
        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-location-outline" round>地图选点</el-button>
        <el-dialog title="地图选点" :visible.sync="dialogVisible" class="dialog">
          <map-container :location="this.location" @address="getAddress" @location="getMapLocation"></map-container>
        </el-dialog>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm">确 定</el-button>
  </el-container>
</template>

<script>

import mapContainer from "@/components/MapContainer/index.vue";
import { updateSeller } from "@/api/user/seller";
import confetti from "canvas-confetti";

export default {
  components: {mapContainer},
  created() {
    this.form.username = this.$route.params.username;
  },
  data() {
    return {
      // 表单参数
      form: {
        username: null
      },
      // 表单校验
      rules: {
        storeName: [{ required: true, message: "店铺名称不能为空", trigger: "blur" }],
        phone: [{ required: true, message: "电话不能为空", trigger: "blur" }],
        status: [{ required: true, message: "状态不能为空", trigger: "change" }]
      },
      // 手动地图选点
      dialogVisible: false,
      location: {},
      address: null
    };
  },
  methods: {
    // 前端获取地址
    getAddress(address) {
      this.address = address;
    },
    // 前端获取gps
    getMapLocation(location) {
      this.location = location;
      this.dialogVisible = false;
      this.form.longitude = location.lng;
      this.form.latitude = location.lat;
    },
    randomInRange(min, max) {
      return Math.random() * (max - min) + min;
    },
    launch() {
      confetti({
        angle: this.randomInRange(20, 70),
        particleCount: this.randomInRange(180, 300),
        spread: 80,
        drift: 0.5,
        ticks: 300,
        origin: { y: 0.6,x: 0.1 }
      });
    },
    // 提交按钮
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateSeller(this.form).then(response => {
            this.launch()
            this.$modal.msgSuccess("完善成功！");
            this.$router.push({ path: this.redirect || "/backstage" }).catch(()=>{});
          });
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">

</style>
